<template>
  <TopNav title="院内营养产品质量控制"/>
  <div class="quality-monitoring-page">

    <!-- 产品筛选区域 -->
    <div class="product-filter-section">
      <h2 class="section-title">产品筛选</h2>
      <el-form :model="filterForm">
        <el-form-item label="产品名称">
          <el-input v-model="filterForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="生产批次">
          <el-input v-model="filterForm.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="生产日期范围">
          <el-date-picker
              v-model="filterForm.productionDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-button
          type="primary"
          @click="filterProducts"
          :disabled="!filterForm.productName &&!filterForm.batchNumber &&!filterForm.productionDateRange.length"
      >筛选产品</el-button>
    </div>

    <!-- 质量检查结果区域 -->
    <div class="quality-check-results-section">
      <h2 class="section-title">质量检查结果</h2>
      <el-table :data="filteredQualityResults" style="width: 100%">
        <el-table-column prop="productName" label="产品名称" width="150"></el-table-column>
        <el-table-column prop="batchNumber" label="生产批次" width="120"></el-table-column>
        <el-table-column prop="productionDate" label="生产日期" width="150"></el-table-column>
        <el-table-column prop="expirationDate" label="有效期至" width="150"></el-table-column>
        <el-table-column prop="qualityStatus" label="质量状态" width="120">
          <template #default="{ row }">
            <span
                :class="{
                'quality-pass': row.qualityStatus === '合格',
                'quality-fail': row.qualityStatus === '不合格'
              }"
            >{{ row.qualityStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检查详情" width="300">
          <template #default="{ row }">
            <p>成分含量：{{ row.componentContent }}</p>
            <p>微生物指标：{{ row.microorganismIndicators }}</p>
            <p>物理性状：{{ row.physicalProperties }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 质量趋势图表区域 -->
    <div class="quality-trend-chart-section">
      <h2 class="section-title">质量趋势</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>

    <!-- 操作记录区域 -->
    <div class="operation-record-section">
      <h2 class="section-title">操作记录</h2>
      <el-table :data="operationRecords" style="width: 100%">
        <el-table-column prop="date" label="日期" width="150"></el-table-column>
        <el-table-column prop="operation" label="操作" width="150"></el-table-column>
        <el-table-column prop="operator" label="操作人员" width="120"></el-table-column>
        <el-table-column prop="remark" label="备注" width="300"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 产品筛选表单数据
const filterForm = ref({
  productName: '',
  batchNumber: '',
  productionDateRange: []
});

// 模拟的质量检查结果数据
const qualityResults = ref([
  {
    productName: '营养粉 A',
    batchNumber: '20240101',
    productionDate: '2024-01-01',
    expirationDate: '2025-01-01',
    qualityStatus: '合格',
    componentContent: '蛋白质含量 20%，维生素含量达标',
    microorganismIndicators: '菌落总数合格，未检出致病菌',
    physicalProperties: '粉末细腻，无结块'
  },
  {
    productName: '营养粉 A',
    batchNumber: '20240201',
    productionDate: '2024-02-01',
    expirationDate: '2025-02-01',
    qualityStatus: '合格',
    componentContent: '蛋白质含量 19.5%，维生素含量达标',
    microorganismIndicators: '菌落总数合格，未检出致病菌',
    physicalProperties: '粉末细腻，无结块'
  },
  {
    productName: '营养液 B',
    batchNumber: '20240102',
    productionDate: '2024-01-02',
    expirationDate: '2025-01-02',
    qualityStatus: '不合格',
    componentContent: '某种微量元素含量偏低',
    microorganismIndicators: '菌落总数超标',
    physicalProperties: '有轻微沉淀'
  }
]);

// 操作记录数据
const operationRecords = ref([
  {
    date: '2024-01-10',
    operation: '抽样检查',
    operator: '张三',
    remark: '对营养粉 A 进行常规抽样检查'
  },
  {
    date: '2024-02-15',
    operation: '复查',
    operator: '李四',
    remark: '对营养液 B 不合格批次进行复查'
  }
]);

// 筛选后的质量检查结果
const filteredQualityResults = ref([]);

// 筛选产品方法
const filterProducts = () => {
  filteredQualityResults.value = qualityResults.value.filter((result) => {
    let match = true;
    if (filterForm.value.productName && result.productName.indexOf(filterForm.value.productName) === -1) {
      match = false;
    }
    if (filterForm.value.batchNumber && result.batchNumber.indexOf(filterForm.value.batchNumber) === -1) {
      match = false;
    }
    if (filterForm.value.productionDateRange.length === 2) {
      const startDate = filterForm.value.productionDateRange[0];
      const endDate = filterForm.value.productionDateRange[1];
      if (result.productionDate < startDate || result.productionDate > endDate) {
        match = false;
      }
    }
    return match;
  });

  // 更新质量趋势图表
  updateQualityTrendChart();
};

// 更新质量趋势图表
const updateQualityTrendChart = () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = filteredQualityResults.value.map((result) => result.batchNumber);
  const yAxisData = filteredQualityResults.value.map((result) => result.qualityStatus === '合格'? 1 : 0);
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1
    },
    series: [
      {
        name: '质量状态',
        type: 'line',
        data: yAxisData,
        lineStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表并显示所有数据
onMounted(() => {
  filteredQualityResults.value = qualityResults.value;
  updateQualityTrendChart();
});
</script>

<style scoped>
.quality-monitoring-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.product-filter-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.quality-check-results-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.quality-trend-chart-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.operation-record-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.quality-pass {
  color: #5cb85c;
}
.quality-fail {
  color: #d9534f;
}
</style>
